<template>
	<!--排行-->
	<div class="Ranking">
		<div class="musicRanking">
			<ul>
				<li v-for="item,index in musiclist" @click="xinG(index)">
					<!--图片-->
					<div class="rankingImg">
						<img :src="item.pic_big" />
						<span class="play">
							<img src="../images/bof.png"  alt=""/>
						</span>
					</div>
					<!--歌名，歌手-->
					<div class="rankingText">
						<p>{{item.title}}</p>
						<span>{{item.author}}</span>
						<p>{{item.introduction}}</p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	import rankingImg from "./img.vue";
	import jsonp from "jsonp";
	export default {
		name: 'rankmusic',
		props: ["musiclist", "type", "src", "name"],
		components: {},
		methods: {
			xinG(index) {
				//          	console.log(index)
//				console.log(this.type[index].song_id)
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid=" + this.musiclist[index].song_id, null, (err, res) => {
					if(err) {
						console.log(err)
					} else {
						console.log(res)
						this.$store.commit("changSong", res.bitrate.file_link)
						this.$store.commit("changeid", res.songinfo.pic_big)
						this.$store.commit("changtitle", res.songinfo.title)
						this.$store.commit("changinfo", res.songinfo.info)
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.Ranking {
		width: 100%;
		margin: 0 auto;
	}
	
	.musicRanking {
		width: 93%;
		height: 32%;
		margin: 0 auto;
		overflow: hidden;
	}
	
	ul {
		margin-top: 3%;
	}
	
	ul li {
		width: 100%;
		height: 32%;
		white-space: nowrap;
		font-size: 0;
		overflow: hidden;
		position: relative;
		padding-bottom: 2%;
		margin-bottom: 2%;
		border-bottom: 1px solid #dedede;
	}
	
	.rankingImg {
		display: inline-block;
		width: 35%;
		position: relative;
	}
	
	.rankingImg img {
		width: 100%;
	}
	
	.play {
		width: 24%;
		height: 24%;
		border-radius: 50%;
		position: absolute;
		right: 5%;
		bottom: 4%;
	}
	
	.rankingText {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0, -50%);
		vertical-align: top;
		display: inline-block;
		width: 60%;
	}
	
	.rankingText:last-child {
		/*display: none;*/
	}
	
	p {
		font-size: 16px;
		color: #000000;
		display: inline-block;
		padding: 0 5%;
	}
	
	span {
		width: 30%;
		font-size: 16px;
		line-height: 32px;
		color: #838383;
		display: inline-block;
		text-overflow: ellipsis;
		word-break: keep-all;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>